<template>
    <el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbar-con">
        <el-menu :collapse="collapsed" collapse-transition router :default-active="activeMenu" unique-opened class="el-menu-vertical-demo"
                 background-color="#20232A" text-color="#fff">
            <div class="logobox">
                <div class="logo">
                    <img class="logoimg" :src="siteInfo.logo" alt="" />
                </div>
                <span class="admin-title" :class="[collapsed ? 'admin-title-hide':'']">{{ siteInfo.site_name }}</span>
            </div>
            <!-- 导航列表 -->
            <div v-for="item in menuList" :key="item.name">
                <el-menu-item v-if="item.children.length == 0" :index="item.url" :key="item.name">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                </el-menu-item>
                <el-submenu v-else :index="item.name">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title" v-show="!collapsed">{{
                            item.name
                        }}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="secondItem in item.children" :index="secondItem.url" :key="secondItem.name">
                            <i class="menu-icon-op el-icon-s-home"></i>
                            <span slot="title">{{ secondItem.name }}</span>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </div>
        </el-menu>
    </el-scrollbar>
</template>
<script>
import { adminInfo } from '../api/login';
import { getMenu, getPerLevelThird } from '../api/menu';
import { getSettingByKey } from '@/api/setting';
export default {
    name: "leftnav",
    data() {
        return {
            collapsed: false,
            menuList: [],
            perLevelThird: [],
            siteInfo: {},
        };
    },
    computed: {
        isMobile() {
            return this.$store.state.isMobile;
        },
        adminInfo() {
            return this.$store.state.adminInfo;
        },
        activeMenu() {
            const route = this.$route;
            const { meta, path } = route;
            if (meta.activeMenu) {
                return meta.activeMenu;
            }
            return path;
        },
    },
    watch: {
        // 监听路由的变化
        $route: {
            handler(to) {
                this.$store.commit("SET_DRAWER_VAL", false);
            },
            deep: true,
        },
    },
    // 创建完毕状态(里面是操作)
    created() {
        this.getMenuList();
        // 监听
        this.$root.Bus.$on("toggle", (value) => {
            this.collapsed = !value;
        });
        this.getSiteInfo()
    },
    methods: {
        /* 
            *左侧导航栏
            *getMenuList() 获取左边导航栏
        */
        getMenuList() {
            const menuList = [
                {
                    children: [],
                    icon: "el-icon-data-line",
                    menuid: 0,
                    name: "首页",
                    url: "/charts/statistics"
                },
                {
                    children: [
                        {
                            menuid: 0,
                            name: "商品分类",
                            url: "/goods/category"
                        },
                        {
                            menuid: 1,
                            name: "平台商品",
                            url: "/goods/list"
                        },
                        {
                            menuid: 2,
                            name: "供应商商品",
                            url: "/goods/supplier_list"
                        },
                    ],
                    icon: "el-icon-goods",
                    menuid: 1,
                    name: "商品",
                    url: ""
                },
                {
                    children: [
                        {
                            menuid: 0,
                            name: "司机管理",
                            url: "/driver/list"
                        },
                    ],
                    icon: "el-icon-truck",
                    menuid: 1,
                    name: "司机",
                    url: ""
                },
                {
                    children: [
                        {
                            menuid: 0,
                            name: "合同管理",
                            url: "/contract/list"
                        },
                    ],
                    icon: "el-icon-document",
                    menuid: 1,
                    name: "合同",
                    url: ""
                },
                {
                    children: [
                        {
                            menuid: 0,
                            name: "订单管理",
                            url: "/order/list"
                        },
                    ],
                    icon: "el-icon-s-order",
                    menuid: 1,
                    name: "订单",
                    url: ""
                },
                {
                    children: [
                        {
                            menuid: 0,
                            name: "账单列表",
                            url: "/finance/list"
                        },
                    ],
                    icon: "el-icon-s-finance",
                    menuid: 1,
                    name: "财务",
                    url: ""
                },
                {
                    children: [
                        {
                            menuid: 0,
                            name: "系统设置",
                            url: "/setting/system"
                        },
                        {
                            menuid: 1,
                            name: "地址管理",
                            url: "/setting/address_list"
                        },
                    ],
                    icon: "el-icon-setting",
                    menuid: 1,
                    name: "设置",
                    url: ""
                }

            ];
            this.menuList = menuList;
        },
        getSiteInfo() {
            getSettingByKey({
                keys: 'basic'
            }).then(res => {
                if (res.code == 0) {
                    this.siteInfo = res.data.values
                }
            })
        },
    },
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
}

.el-menu-item-group__title {
    padding: 0px 0 0px 0px !important;
}

.el-menu-item.is-active {
    /* color: #2473f4; */
    color: #fff;
    background: #2473f4 !important;
}

.el-submenu__icon-arrow.el-icon-arrow-right {
    display: none;
}

.el-menu-bg {
    background-color: #1f2d3d !important;
}

.el-menu {
    border: none;
}

.scrollbar-con {
    overflow-x: hidden;
}

.el-scrollbar {
    width: 100%;
    height: 100%;
}

.scrollbar-wrapper {
    overflow-x: hidden;
}

.el-submenu__title i {
    color: #fff;
}

.el-menu-item i {
    color: #fff;
}

.el-menu-item:focus,
.el-menu-item:hover {
    outline: 0;
    background-color: red;
}

.logobox {
    height: 50px;
    line-height: 50px;
    color: #9d9d9d;
    font-size: 20px;
    padding: 14px 14px 20px 0px;
    display: flex;
    align-items: center;
}
.logo{
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logoimg {
    height: 50px;
}

.admin-title {
    width:120px;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-transition: all 0.28s;
    transition: all 0.28s;
}
.admin-title-hide{
    opacity: 0;
    width: 0;
}
.menu-icon-op {
    opacity: 0;
}
</style>